<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .box{
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
            overflow: hidden;
        }
        .sub{
            width: 100px;
            height: 100px;
            background-color: #f00;
            margin: 50px;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="sub">
            <span>123123</span>
        </div>
    </div>
</body>
<script>
    // 事件对象  => 事件触发时的相关信息(浏览器给的)
    // 相关信息: 什么时间 执行了什么类型的事件 谁触发   组合键(ctrl alt shift meta 是否被按下)  鼠标(鼠标按键 鼠标位置)  键盘(按键 字符 键盘码 字符编码)等等 

    // 事件对象的兼容 (判断赋值)
    // var e = e ? e :window.event;
    // var e = e || window.event;

    // 事件对象的属性 (事件对象 => 对象 => 存在属性和方法)

    // 通用:
    // timeStamp    时间戳(了解)  => 从页面加载到事件触发,经过的事件
    // type         事件类型(click dblclick mousedown keydown keyup)
    // target       事件源(触发事件的元素  => 给父元素绑定事件,子(代)元素也可以触发 -> 为了知道是哪个元素触发的事件 -> 事件源)

    // ctrlKey    事件触发时,ctrl键是否被按下
    // altKey    事件触发时,alt键是否被按下
    // shiftKey    事件触发时,shift键是否被按下
    // metaKey    事件触发时,meta键是否被按下
    // 常用于组合键  ctrl + c  ctrl + v  ctrl+enter   

    var box = document.getElementsByClassName("box")[0];

    // 1. 绑定事件
    // 2. 浏览器侦听到事件被触发,执行既定的事件函数  => (函数是浏览器调用的 -> 它可以将当前事件相关信息 作为一个实参传递给函数内 )
    box.onclick = function(e){ // this => 绑定事件的元素
        //  e   标准浏览器写法
        // window.event   IE低版本

        // 事件对象的兼容 (判断赋值)
        // var e = e ? e :window.event;
        var e = e || window.event;
        console.log(e); 
        
        // console.log(e.timeStamp);
        // console.log(e.type);
        // console.log(e.target);
        
        // console.log(e.ctrlKey,e.altKey,e.shiftKey,e.metaKey);

        // if(e.ctrlKey){
        //     console.log("隐藏界面");
        // }else{
        //     console.log("普通用户界面");
        // }

    }






</script>
</html>